<template>
  <div style="width:100%;display: flex">
    <div class="category">
      <div class="category-list">
        <el-scrollbar >
        <div class="category-item" style="color:#119C59;">分类</div>
        <span class="category-item" v-for="(item , index) in categoryList" :key="index" @click="getNewsListByCategory(item.id)">
          <span>{{ item.categoryName }} </span>
        </span>
        </el-scrollbar>
      </div>

    </div>

    <div class="new">
      <div style="color:#9b9898;margin-left: 30px;margin-top: 10px;font-size: 14px;">推荐标题、关键字搜索</div>
      <input type="text" class="input" v-model="key" placeholder="搜索您感兴趣的新闻">
      <el-icon @click="gotoSearch()" style="font-size: 22px;margin-left: -30px;margin-top: 5px;"><Search /></el-icon>
      <div class="me" @click="gotoUserCenter()">
        用户名@邮箱
        <div class="IconOutlinedEditorActionCopy" style="position: absolute;">
          <div class="Vector"
               style="width: 13px; height: 13px; left: 130px; top: -22px; position: absolute; border: 2px #52575C solid">
          </div>
          <div class="Vector"
               style="width: 13px; height: 13px; left: 126px; top: -16px; position: absolute; border: 2px #52575C solid">
          </div>
        </div>
      </div>
      <br>
      <span style="font-size: 52px;">新 闻</span>
      <div class="category-name">资讯</div>

      <div class="news-list">
        <el-scrollbar >
          <div v-for="(item , index) in newsList" :key="index" class="new-item">
            <div class="new-msg">
              {{item.title}}
              <div class="new-time">
                {{ item.createTime ? item.createTime.slice(5, 7) : 'N/A'}} /
                {{ item.createTime ? item.createTime.slice(8, 10) : 'N/A'}} &nbsp;
                {{ item.createTime ? item.createTime.slice(0, 4) : 'N/A'}}
              </div>
            </div>

            <div class="new-cover">
              <img :src="item.coverImage" alt="" style="width:100%;height:100%;">
            </div>
          </div>
        </el-scrollbar>
      </div>
<!--      <el-pagination layout="prev, pager, next" :total="50" />-->
    </div>
    <div class="Group993" style="width: 212px; height: 32px; left: 53px; top: 41px; position: absolute">
      <div class="Newsletter"
           style="left: 0px; top: 2px; position: absolute; text-align: center; color: #119C59; font-size: 25px; font-family: Montserrat; font-weight: 700; text-transform: uppercase; letter-spacing: 0.20px; word-wrap: break-word">
        Newsletter</div>
      <div class="App"
           style="left: 183px; top: 0px; position: absolute; text-align: center; color: #333333; font-size: 14px; font-family: Montserrat; font-weight: 700; letter-spacing: 0.20px; word-wrap: break-word">
        App</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import { useRouter } from 'vue-router'
import { getAllNewsList, getNewsByCategory } from "@/api/news";
import { NewItem } from "@/api/news/type";
import { getAllCategory } from "@/api/category";
import { CategoryItem } from "@/api/category/type";
const router = useRouter()
//首页新闻列表
const newsList = ref<NewItem[]>()
//首页分类列表
const categoryList = ref<CategoryItem[]>()
onMounted(async() => {
  await getCategoryList()
  await getNewsList()
})
const getNewsList = async() => {
  try {
    const { data } = await getAllNewsList()
    // console.log(data)
    newsList.value = data
    // console.log(newsList.value)
  } catch(error) {
    await Promise.reject(error)
  }
}
const getCategoryList = async() => {
  try {
    const { data } = await getAllCategory()
    // console.log(data)
    categoryList.value = data
    console.log(categoryList.value)
  } catch(error) {
    await Promise.reject(error)
  }
}
//根据分类获取列表
const getNewsListByCategory = async(id:number) => {
  try {
    const { data } = await getNewsByCategory(id)
    // console.log(data)
    newsList.value = data
    console.log(newsList.value)
  } catch(error) {
    await Promise.reject(error)
  }
}
//搜索关键词
const key = ref<string>('')
//跳转搜索
const gotoSearch = () => {
  router.push({path:'/search',query: { key: key.value as string }})
}
//跳转个人中心
const gotoUserCenter = () => {
  router.push({path:'/user-center'})
}

const fetchData = async() => {

}
</script>

<style scoped>
.category {
  width:30%;
  /*height:100%;*/
  background-color: rgba(241, 238, 238, 0.66);

}
.new {
  background: #FAF9F7;
  width:70%;
  /*height:100%;*/
  padding-left: 10%;
}
.category-list {
  margin-top: 45%;
}
.category-item {
  padding-left: 15%;
  font-size: 18px;
  display: block;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-right: 10%;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}
.category-item:hover {
  /*color:#119C59;*/
  cursor: pointer;
  background-color: #FFE3B3;
}
.input {
  border:0;
  background-color: #FAF9F7;
  border-bottom: 4px solid #888888;
  margin-top: 10px;
  width:500px;
  height:50px;
  font-size: 18px;
  color:#52575C;
  padding-left: 10px;
  display: inline-block;
  margin-bottom: 8%;
}
.input:focus {
  outline: none;
}
.input::-webkit-input-placeholder {
  text-indent: 20px;
}
.input:focus::placeholder {
  /*transform: scale(0.8) translateY(-100%);*/
  text-indent: 0px;
}
.input:focus {
  border-bottom: 4px solid #119C59;
}
.category-name {
  font-size: 22px;
  color:#119C59;
  padding-top: 30px;
  padding-bottom: 10px;
  border-bottom: 3px solid #119C59;
  width:120px;
}
.me {
  margin-left: 20%;
  display: inline-block;
  font-size: 18px;
  color:#52575C;
}
.news-list {
  margin-top: 50px;
  /*border: 1px dashed black;*/
  /*height: 60%;*/
  width:75%;
}
.new-item {
  width:100%;
  height:123px;
  margin-bottom: 30px;
}
.new-msg {
  display: inline-block;
  font-size: 20px;
}
.new-time {
  margin-top: 40px;
  font-size: 16px;
  color:#52575C;
}
.new-cover {
  width:216px;
  height:100%;
  float:right;
}
</style>
